<template>
  <div class="ac-wrap" v-loading="loading">
    <div class="screen">
      <img src="../../images/main/screen.png" alt> 筛选查询
    </div>
    <div class="sel">
      <div class="activity-name">
        <span>活动名称：</span>
        <el-input class="ac-name" type="text" placeholder="活动名称" v-model="params.keyWord"></el-input>
      </div>
      <div class="activity-date">
        <span>活动时间：</span>
         <el-date-picker class="ac-start-date"
      v-model="params.startTime"
      type="date"
      placeholder="选择开始日期">
    </el-date-picker>
    <el-date-picker class="ac-start-date"
      v-model="params.endTime"
      type="date"
      placeholder="选择结束日期">
    </el-date-picker>
      </div>
      <div class="activity-status">
      <span>活动状态：</span>
      <el-select class="ac-change" placeholder="请选择活动状态" v-model="changeStates">
        <el-option label="请选择" value="0">请选择</el-option>
        <el-option label="待合作" value="1">待合作 </el-option>
        <el-option label="待审核" value="2">待审核</el-option>
        <el-option label="待报名" value="4">待报名</el-option>
        <el-option label="已成团" value="5">已成团 </el-option>
        <el-option label="待签到" value="6">待签到</el-option>
        <el-option label="已结束" value="7">已结束 </el-option>
        <el-option label="已驳回" value="3">已驳回 </el-option>
        <el-option label="已关闭" value="8">已关闭</el-option>
      </el-select>
        <div class="sel-btn" @click="getAcList(changeStates)">搜索</div>
      </div>
    </div>
    <div class="clear"></div>
    <div class="ac-tabs">
      <div :class="states == 0 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(0)">
        全部
      </div>
      <div :class="states == 1 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(1)">
        待合作
      </div>
      <div :class="states == 2 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(2)">
        待审核
      </div>
      <div :class="states == 4 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(4)">
        待报名
      </div>
      <div :class="states == 5 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(5)">
        已成团
      </div>
      <div :class="states == 6 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(6)">
        待签到
      </div>
      <div :class="states == 7 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(7)">
        已结束
      </div>
      <div :class="states == 3 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(3)">
        已驳回
      </div>
      <div :class="states == 8 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(8)">
        已关闭
      </div>
    </div>
    <div class="table">
      <div class="thead">
        <div class="ac-poster ">活动海报</div>
        <div class="ac-bt">活动标题</div>
        <div class="ac-ybm">已报名</div>
        <div class="ac-fc">分成比例</div>
        <div class="ac-jzdate">活动开始时间</div>
        <div class="ac-state">活动状态</div>
        <div class="ac-ctrl">操作</div>
      </div>
      <div  class="tbody" v-if="acList.length == 0" style="text-align:center;height:60px;line-height:60px;">暂无数据</div>
      <div class="tbody" v-for="(item,index) in acList" :key="index">
        <div class="ac-poster ">
          <img :src="item.activity_img" alt=""/>
        </div>
        <div
          class="ac-bt"
          :style="{
            display: 'flex',
            alignItems: 'left',
            justifyContent: 'space-around',
            flexDirection: 'column',
            wordBreak: 'break-all',
            whiteSpace: 'normal',
            lineHeight: 'initial'
          }">
          {{item.activity_title}}
        </div>
        <div
          class="ac-ybm"
          v-if="item.states == 4"
          >
          {{item.signCount}}人（还差{{item.participate_min - item.signCount}}人成团）
        </div>
        <div class="ac-ybm" v-else>{{item.signCount}}<span style="color: #4a4a4a;">人</span></div>
        <div class="ac-fc">{{item.percentage}}%</div>
        <div class="ac-jzdate">
          <div>{{setDate(item.closing_time)}} {{setTime(item.closing_time)}}</div>
        </div>
        <div class="ac-state" v-if="item.states== 1">待合作</div>
        <div class="ac-state" v-if="item.states== 2">待审核</div>
        <div class="ac-state" v-if="item.states== 3"><div style="text-align:left;">已驳回 驳回原因：{{ item.reject }}</div></div>
        <div class="ac-state" v-if="item.states== 4">待报名</div>
        <div class="ac-state" v-if="item.states== 5">已成团 </div>
        <div class="ac-state" v-if="item.states== 6">待签到</div>
        <div class="ac-state" v-if="item.states== 7">已结束</div>
        <div class="ac-state" v-if="item.states== 8">已关闭</div>
        <div class="ac-ctrl" v-if="item.states== 1 ||item.states== 2 ||item.states== 8">
          <div @click="queryDetail(item.id)">查看详情</div>
        </div>
        <div class="ac-ctrl" v-if="item.states== 4 ||item.states== 5 ||item.states== 6">
          <div @click="queryDetail(item.id)">查看详情</div>
          <div @click="getErCode(item.id)">推广二维码</div>
        </div>
        <div class="ac-ctrl" v-if="item.states== 7">
          <div @click="queryDetail(item.id)">查看详情</div>
          <div @click="addAgain(item.id)" >再次创建活动</div>
          <div @click="getErCode(item.id)">推广二维码</div>
        </div>
        <div class="ac-ctrl" v-if="item.states== 3">
          <div @click="queryDetail(item.id)">查看详情</div>
          <div @click="editAc(item.id)">修改</div>
          <!-- <div @click="addAgain(item.id)">再次创建活动</div> -->
        </div>
      </div>
    </div>

    <div class="tasker" id="img">
      <img src="../../images/main/ercode.png" alt="">
    </div>
    <el-pagination
      @current-change="handleCurrentChange"

      :current-page="params.page"
      :total="params.total"
      style="text-align:center;margin:20px auto;"
      layout="prev, pager, next, jumper">
    </el-pagination>

  </div>
</template>
<script>
  import qs from 'qs' // 将请求转换成form 表单提交形式'
  export default {
    data() {
      return {
        loading: false,
        params: {
          page: 1,
          limit: 10,
          keyWord: "",
          startTime: '',
          endTime: '',
          states: '',
          total:0,
          serviceId: this.$store.state.userId
        },
        changeStates: '',
        states: 0,
        acList: [],
        src: ''
      };
    },
    created(){
    },
    methods: {
      /**
       * 分页
       */
      handleCurrentChange: function (index) {
        let that = this
        that.params.page = index
        that.getAcList()
      },
      /**
     * 再次创建活动
     */
    addAgain: function ( id ) {
      this.$router.push({
        path:'/main/addAc',
        query: {
          p: this.encodeJson({
            activityId: id,
            again:true
          })
        }
      })
    },
      /**
       * 修改活动
       */
      editAc: function(id) {
        this.$router.push({
          path: '/main/addAc',
          query: {
            p: this.encodeJson ({
              activityId: id,
              again:false
            })
          }
        })
      },
      /**
       * 获取二维码
       */
      getErCode: function(id) {
        let that = this
        this.$alert(`<img src="${that.$store.state.url}/activity/getQrCode?id=${id}&userId=${that.$cookie.get('serviceId')}">`, '二维码', {
          dangerouslyUseHTMLString: true
        });
      },
      /**
       *  查询活动列表
       */
      getAcList: function(num) {
        this.loading = true;
        let that = this;
        that.params.states = num
        that.states = num
        if (num == 0) {
          that.params.states = ''
        }
        that.axios({
          method: 'post',
          url: `activity/selectList`,
          data: qs.stringify(that.params)
        }).then(res => {
          this.loading = false;
          if (res.data.code == 0) {
            that.acList = res.data.data
            that.params.total = res.data.count
          }
        })
      },
      /**
       * 活动详情
       */
      queryDetail: function(id) {
        this.$router.push({
          path: '/main/activityDetail',
          query: {
            // id: id
            p: this.encodeJson({
              activityId: id
            })
          }
        })
      },
      /**
       * 根据时间毫秒数 返回年月日
       */
      setDate: function(str) {
        let times = new Date(str)
        return `${times.getFullYear()}-${times.getMonth()+1 < 10 ?'0' + (times.getMonth() + 1) : times.getMonth()+1}-${times.getDate() < 10 ? '0' + times.getDate() : times.getDate()}`
      },
      /**
       * 根据时间毫秒数 返回时分秒
       */
      setTime: function(str) {
        let times = new Date(str)
        return `${times.getHours() < 10 ? '0' + times.getHours() : times.getHours()}:${times.getMinutes() < 10 ? '0' + times.getMinutes() : times.getMinutes()}:${times.getSeconds() < 10 ? '0' + times.getSeconds() : times.getSeconds()}`
      },
    },
    mounted() {
      this.getAcList(0)
    }
  };
</script>
<style scoped>

  .tasker {
    width: 400px;
    height: 400px;
    padding: 10px;
    display: none;
  }
  .ac-wrap {
    /* width: 90%; */
    margin-left: 21px;
  }
  .screen {
    /* width: 1490px; */
    height: 60px;
    background: #f6f6f6;
    line-height: 60px;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #888888;
  }
  .screen img {
    float: left;
    width: 27px;
    height: 27px;
    margin-left: 10px;
    margin-top: 16px;
    margin-right: 18px;
  }
  .sel {
    margin-top: 48px;
    /* height: 40px; */
    /* line-height: 40px; */
    /* width: 1490px; */
    overflow: hidden;
  }
  .sel span {
    width: 90px;
    line-height: 40px;
    height: 40px;
    float: left;
    font-size: 18px;
    font-weight: bold;
  }
  .sel input {
    background: #ffffff;
    border: 1px solid #979797;
    box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.50);
    width: 220px;
    height: 38px;
    font-size: 18px;
    color: #888888;
    text-align: center;
    float: left;
    outline: none;
  }
  .sel-btn {
    width: 80px;
    background: #085dab;
    color: #fff;
    text-align: center;
    height: 38px;
    line-height: 38px;
    float: left;
    margin-left: 50px;
    cursor: pointer;
    float: right;
  }
  .sel select {
    background: #ffffff;
    border: 1px solid #979797;
    box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.50);
    width: 220px;
    height: 38px;
    font-size: 18px;
    color: #888888;
    text-align: center;
    float: left;
    outline: none;
    padding-left: 70px;
  }
  .ac-name {
    margin-left: 24px;
    margin-right: 55px;
    width: 220px;
  }
  .ac-start-date {
    margin-left: 23px;
    margin-right: 30px;
  }
  .ac-end-date {
    margin-left: 0px;
    margin-right: 63px;
  }
  .ac-change {
    margin-left: 22px;
  }
  .ac-fc {
    /* width: 222px; */
    width: 14%;
  }
  .ac-tabs {
    /* width: 1520px; */
    height: 55px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-top: 54px;
    border-bottom: 1px solid #ddd;
  }
  .ac-tabs>div {
    cursor: pointer;
  }
  .ac-title {
    /* width: 69px; */
    width: 11.11111111111111%;
    text-align: center;
    line-height: 28px;
    height: 55px;
    float: left;
    box-sizing: border-box;
    /* margin-left: 100px; */
  }
  .ac-title-active {
    border-bottom: 3px solid #085dab;
  }
  .ac-title:first-child {
    margin-left: 0;
  }
  .table {
    /* margin-left: 13px; */
    /* width: 1490px; */
  }
  .thead {
    background: #e0eefe;
    border: 1px solid #dddddd;
    /* width: 1490px; */
    height: 67px;
    line-height: 67px;
    font-size: 20px;
    text-align: center;
    margin-top: 24px;
    box-sizing:border-box;
  }
  .thead>div {
    float: left;
    height: 67px;
    font-weight: bold;
    text-align: center;
    border-right: 1px solid #ddd;
    box-sizing:border-box;
  }
  .tbody {
    border: 1px solid #dddddd;
    box-sizing:border-box;
    /* width: 1490px; */
    border-top: 0px;
    height: 161px;
    overflow: hidden;
  }
  .tbody>div {
    float: left;
    height: 161px;
    /* line-height: 161px; */
    text-align: center;
    font-size: 18px;
    color: #4a4a4a;
    border-right: 1px solid #ddd;
    box-sizing:border-box;
    display: flex;
    justify-content:center;
    align-items:Center;
  }
  .tbody>.ac-ybm {
    color: #fe0000;
  }
  .tbody .tbody .ac-bt {
    line-height: 25px;
    box-sizing: border-box;
    padding: 0 18px 0 18px;
    text-align: left;
    font-weight: bold;
    box-sizing: border-box;
    width: 100%;
  }
  .tbody .ac-jzdate {
    line-height: 25px;
    /* padding-top: 60px; */
    /* height: 101px; */
  }
  .tbody .ac-ctrl {
    color: #085dab;
    border-right: 0px;
    cursor: pointer;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
  }
  .tbody .ac-ctrl>div {
    text-align: center;
    font-weight: bold;
    background: #085dab;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.50);
    border-radius: 2px;
    width: 109px;
    height: 35px;
    font-size: 14px;
    color: #ffffff;
    line-height: 35px;
    margin: 5px auto;
  }
  .day,
  .time {
    height: 25px;
    line-height: 25px;
  }
  .ac-poster {
    /* width: 189px; */
    width: 14%;
  }
  .ac-poster img {
    /* padding-top: 40px; */
    width: 135px;
    height: 85px;
    display: inline-block;
  }
  .ac-bt {
    /* width: 242px; */
    width: 14%;
  }
  .ac-ybm {
    /* width: 189px; */
    width: 14%;
  }
  .ac-jzdate {
    /* width: 224px; */
    width: 14%;
  }
  .ac-state {
    /* width: 219px; */
    width: 14%;
  }
  .ac-ctrl {
    /* width: 198px; */
    width: 16%;
  }
  .clear {
    clear: both;
  }
  .sel>div{
    height: 40px;
    padding:10px 0;
    float: left;
    overflow: hidden;
  }
</style>
